<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const option = {
    tooltip: {
        trigger: 'axis',
        // axisPointer: {
        //     type: 'shadow',
        // },
    },
    grid: {
        top: '17%',
        right: '5%',
        left: '0',
        bottom: '0',
        containLabel: true,
    },
    // legend: {
    //     top: '5%',
    //     x: 'center',
    //     textStyle: {
    //         color: '#9E9E9E',
    //     },
    // },

    legend: {
        top: '5%',
        padding:[0,30,0,30],
            // icon: 'circle',
            // x: 'center',
            // y: '80%',
            // data: ['一月', '二月', '三月'],
            textStyle: {
                color: '#fff',
            },
            type: 'scroll'
        },
    xAxis: [
        {
            type: 'category',
            data: [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022],
            axisLine: {
                lineStyle: {
                    color: '#02387B',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                color: '#ffffff',
                textStyle: {
                    fontSize: 12,
                },
            },
        },
    ],
    yAxis: [
        {
            axisLabel: {
                formatter: '{value}',
                color: 'rgb(148,159,167)',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
        {
            type: 'value',
            position: 'right',
            axisLabel: {
                formatter: '{value}',
                color: 'rgb(148,159,167)',
            },
            splitLine: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '研发投入强度(%)',
            type: 'line',
            data: [0.77, 0.9, 0.97, 1.03, 1, 1.05, 1.07, 0.89, 0.8, 0.86, 0.93, 0.9, 0.9],
            itemStyle: {
                // opacity: 0,
                color: '#1890FF',
            },
            lineStyle: {
                color: '#1890FF',
                width: 3,
            },
            // label: {
            //     normal: {
            //         position: 'top',
            //         color: '#fff',
            //         show: true,
            //     },
            // },
            yAxisIndex: 0,
        },
        {
            name: '全区财政科技支出占财政支出比重(%)',
            type: 'line',
            data: [0.94, 0.94, 0.81, 0.86, 0.85, 0.84, 0.72, 0.74, 0.54, 0.56, 0.61, 0.67, 0.73],
            itemStyle: {
                opacity: 0,
                // color: '#56DE4E',
            },
            lineStyle: {
                color: '#56DE4E',
                width: 3,
            },
            // label: {
            //     normal: {
            //         position: 'top',
            //         color: '#fff',
            //         show: true,
            //     },
            // },
            yAxisIndex: 0,
        },
        {
            name: '全社会研发人员全时当量(人员)',
            type: 'line',
            data: [25000, 27000,37235,36123,38652,39531,32456,25112,25102,28536,27953,26353,26953],
            itemStyle: {
                opacity: 0,
                // color: '#56DE4E',
            },
            lineStyle: {
                color: '#00EEFD',
                width: 3,
            },
            // label: {
            //     normal: {
            //         position: 'top',
            //         color: '#fff',
            //         show: true,
            //     },
            // },
            yAxisIndex: 1,
        },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
